<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Language" content="en" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Tabs Demo</title>
        <link rel="stylesheet" href="../themes/flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)" />
        <link rel="stylesheet" href="css/style.css" type="text/css" />

        <script type="text/javascript">
            /* Fix for IE6 background-image flicker
             * See http://www.mister-pixel.com/#Content__state=is_that_simple
             */
            try {
                document.execCommand('BackgroundImageCache', false, true);
            } catch(err) {}
        </script>

		<script type="text/javascript" src="../jquery-1.2.4b.js"></script>

        <script type="text/javascript" src="../ui.core.js"></script>
        <script type="text/javascript" src="../ui.tabs.js"></script>
    </head>
    <body class="flora">

        <h1>Simple Tabs</h1>

        <div id="container-1">
            <ul>
                <li><a href="#fragment-1"><span>One</span></a></li>
                <li><a href="#fragment-2"><span>Two</span></a></li>
                <li><a href="#fragment-3"><span>Three</span></a></li>
            </ul>
            <div id="fragment-1">
                <p>First tab is active by default:</p>
                <pre><code>$('#container-1 > ul').tabs();</code></pre>
            </div>
            <div id="fragment-2">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            </div>
            <div id="fragment-3">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            </div>
        </div>

        <h1>Start With Custom Tab</h1>

        <div id="container-2">
            <ul>
                <li><a href="#fragment-4"><span>One</span></a></li>
                <li><a href="#fragment-5"><span>Two</span></a></li>
                <li><a href="#fragment-6"><span>Three</span></a></li>
            </ul>
            <div id="fragment-4">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            </div>
            <div id="fragment-5">
                <p>Second tab is active:</p>
                <pre><code>$('#container-2 > ul').tabs({ selected: 1 });</code></pre>
                <p>
                    Alternative ways to specify the active tab will overrule this argument, listed in the order of their precedence:</p>
                <ol>
                    <li>If a fragment identifier (hash) in the URL of the page refers to the id of a tab panel of a tab interface the corresponding tab will become the initial tab.</li>
                    <li>Same if you use the cookie option to save the latest selected tab in.</li>
                    <li>Last not least you can set the selected tab by attaching the selected tab class
                    class (default: "ui-tabs-selected") to one of the <code>li</code> elements
                    representing a single tab.</li>
                </ol>
            </div>
            <div id="fragment-6">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            </div>
        </div>

        <h1>Slide Effect</h1>

        <div id="container-3">
            <ul>
                <li><a href="#fragment-7"><span>One</span></a></li>
                <li><a href="#fragment-8"><span>Two</span></a></li>
                <li><a href="#fragment-9"><span>Three</span></a></li>
            </ul>
            <div id="fragment-7">
                <p>
                    Use a slide effect to switch tabs.
                    You can optionally specify the speed for the animation with the option <code>fxSpeed: value</code>.
                    The value is either a string of one of the predefined speeds in jQuery (<code>slow</code>,
                    <code>normal</code>, <code>fast</code>) or an integer value specifying the duration for the animation
                    in milliseconds. If omitted it defaults to <code>normal</code>.
                </p>
                <pre><code>$('#container-3 > ul').tabs({ fx: { height: 'toggle' } });</code></pre>
            </div>
            <div id="fragment-8">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            </div>
            <div id="fragment-9">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            </div>
        </div>

        <h1>Fade Effect</h1>

        <div id="container-4">
            <ul>
                <li><a href="#fragment-10"><span>One</span></a></li>
                <li><a href="#fragment-11"><span>Two</span></a></li>
                <li><a href="#fragment-12"><span>Three</span></a></li>
            </ul>
            <div id="fragment-10">
                <p>
                    Use a fade effect to switch tabs.
                    You can optionally specify the speed for the animation with the option <code>fxSpeed: value</code>.
                    The value is either a string of one of the predefined speeds in jQuery (<code>slow</code>,
                    <code>normal</code>, <code>fast</code>) or an integer value specifying the duration for the animation
                    in milliseconds. If omitted it defaults to <code>normal</code>.
                </p>
                <pre><code>$('#container-4 > ul').tabs({ fx: { opacity: 'toggle' } });</code></pre>
            </div>
            <div id="fragment-11">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            </div>
            <div id="fragment-12">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            </div>
        </div>

        <h1>Slide and Fade Effect Combined</h1>

        <div id="container-5">
            <ul>
                <li><a href="#fragment-13"><span>One</span></a></li>
                <li><a href="#fragment-14"><span>Two</span></a></li>
                <li><a href="#fragment-15"><span>Three</span></a></li>
            </ul>
            <div id="fragment-13">
                <p>Use a combined slide and fade effect to switch tabs:</p>
                <pre><code>$('#container-5 > ul').tabs({ fx: { height: 'toggle', opacity: 'toggle' } });</code></pre>
            </div>
            <div id="fragment-14">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            </div>
            <div id="fragment-15">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            </div>
        </div>

        <h1>Callbacks</h1>

        <div id="container-6">
            <ul>
                <li><a href="#fragment-16"><span>One</span></a></li>
                <li><a href="#fragment-17"><span>Two</span></a></li>
                <li><a href="#fragment-18"><span>Three</span></a></li>
            </ul>
            <div id="fragment-16">
                <p>
                    Define callback functions that are invoked at different points in time during the tab switch process.
                    <br />
                    If the select callback returns false, the clicked tab won't be selected. This is useful if switching
                    tabs requires form validation before for example.
                </p>
                <pre><code>$('#container-6 > ul').tabs({
    select: function(ui) {
        alert('select');
    },
    show: function(ui) {
        alert('show');
    }
});</code></pre>
            </div>
            <div id="fragment-17">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            </div>
            <div id="fragment-18">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            </div>
        </div>

        <h1>Custom animation</h1>

        <div id="container-7">
            <ul>
                <li><a href="#fragment-19"><span>One</span></a></li>
                <li><a href="#fragment-20"><span>Two</span></a></li>
                <li><a href="#fragment-21"><span>Three</span></a></li>
            </ul>
            <div id="fragment-19">
                <p>Define your own custom animation:</p>
                <pre><code>$('#container-7 > ul').tabs({ fx: [null, { height: 'show', opacity: 'show' }] });</code></pre>
            </div>
            <div id="fragment-20">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            </div>
            <div id="fragment-21">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            </div>
        </div>

        <h1>Ajax tabs</h1>

        <div id="container-8">
            <ul>
                <li><a href="ui.tabs.ahah.html" title="Tab one"><span>One</span></a></li>
                <li><a href="ui.tabs.ahah.html" title="Tab two"><span>Two</span></a></li>
                <li><a href="ui.tabs.ahah.html"><span>Three</span></a></li>
            </ul>
        </div>

        <h1>Triggering, Enabling, Disabling, Adding and Removing Tabs</h1>
        <div id="container-9">
            <ul>
                <li><a href="#fragment-22"><span>One</span></a></li>
                <li><a href="#fragment-23"><span>Two</span></a></li>
                <li><a href="#fragment-24"><span>Three</span></a></li>
            </ul>
            <div id="fragment-22">
                <pre><code>$('#container-9 > ul').tabs('select', 2); // simulate click on 3rd tab
$('#container-9 > ul').tabs('enable', 2); // enable 3rd tab
$('#container-9 > ul').tabs('disable, 2); // disable 3rd tab
$('#container-9 > ul').tabs('add', '#new-tab', 'New Tab'); // add new tab at the end
$('#container-9 > ul').tabs('add', '#new-tab', 'New Tab', 1); // add new tab at 2nd position
$('#container-9 > ul').tabs('remove', 3); // remove 4th tab</code></pre>
                <p>
                    One or more tabs can also be disabled immediatly by simply setting the disabling class for the <code class="html">li</code> element
                    representing that particular tab:
                </p>
                <pre><code class="html">&lt;li class=&quot;ui-tabs-disabled&quot;&gt;&#8230;&lt;/li&gt;</code></pre>
                <p>Or by using the <code>disabled</code> option:</p>
                <pre><code class="javascript">$('#container-9 > ul').tabs({ disabled: [1, 2] });</code></pre>
            </div>
            <div id="fragment-23">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            </div>
            <div id="fragment-24">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            </div>
        </div>

        <h1>Start with all tabs unselected/allow toggle visibility</h1>

        <div id="container-10">
            <ul>
                <li><a href="#fragment-25"><span>One</span></a></li>
                <li><a href="#fragment-26"><span>Two</span></a></li>
                <li><a href="#fragment-27"><span>Three</span></a></li>
            </ul>
            <div id="fragment-25">
                <pre><code>$('#container-10 > ul').tabs({ selected: null }); // start with all tabs hidden
$('#container-10 > ul').tabs({ unselect: true }); // selected tab closes on click</code></pre>
            </div>
            <div id="fragment-26">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            </div>
            <div id="fragment-27">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            </div>
        </div>

        <h1>Custom event</h1>

        <div id="container-11">
            <ul>
                <li><a href="#fragment-28"><span>One</span></a></li>
                <li><a href="#fragment-29"><span>Two</span></a></li>
                <li><a href="#fragment-30"><span>Three</span></a></li>
            </ul>
            <div id="fragment-28">
                <p>Define mouseover event to switch tabs</p>
                <pre><code>$('#container-11 > ul').tabs({ event: 'mouseover' });</code></pre>
            </div>
            <div id="fragment-29">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            </div>
            <div id="fragment-30">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            </div>
        </div>
        
        <script type="text/javascript">
            // <![CDATA[
            $(window).bind('load', function() {
                $('#container-1 > ul').tabs();
                $('#container-2 > ul').tabs({ selected: 1 });
                $('#container-3 > ul').tabs({ fx: { height: 'toggle' } });
                $('#container-4 > ul').tabs({ fx: { opacity: 'toggle' } });
                $('#container-5 > ul').tabs({ fx: { height: 'toggle', opacity: 'toggle' } });
                $('#container-6 > ul').tabs({
                    fx: { opacity: 'toggle', duration: 'fast' },
                    select: function(ui) {
                        alert('select');
                    },
                    show: function(ui) {
                        alert('show');
                    }
                });
                $('#container-7 > ul').tabs({ fx: [null, { height: 'show', opacity: 'show' }] });
                $('#container-8 > ul').tabs();
                $('#container-9 > ul').tabs({ disabled: [2] });
                $('<p><a href="#">Remove 4th tab<\/a><\/p>').prependTo('#fragment-22').find('a').click(function() {
                    $('#container-9 > ul').tabs('remove', 3);
                    return false;
                });
                $('<p><a href="#">Insert new tab at 2nd position<\/a><\/p>').prependTo('#fragment-22').find('a').click(function() {
                    $('#container-9 > ul').tabs('add', '#inserted-tab', 'New Tab', 1);
                    return false;
                });
                $('<p><a href="#">Append new tab<\/a><\/p>').prependTo('#fragment-22').find('a').click(function() {
                    $('#container-9 > ul').tabs('add', '#appended-tab', 'New Tab');
                    return false;
                });
                $('<p><a href="#">Disable 3rd tab<\/a><\/p>').prependTo('#fragment-22').find('a').click(function() {
                    $('#container-9 > ul').tabs('disable', 2);
                    return false;
                });
                $('<p><a href="#">Enable 3rd tab<\/a><\/p>').prependTo('#fragment-22').find('a').click(function() {
                    $('#container-9 > ul').tabs('enable', 2);
                    return false;
                });
                $('<p><a href="#">Select 3rd tab<\/a><\/p>').prependTo('#fragment-22').find('a').click(function() {
                    $('#container-9 > ul').tabs('select', 2);
                    return false;
                });
                $('<p><a href="#">Get selected tab<\/a><\/p>').prependTo('#fragment-22').find('a').click(function() {
                    alert( $('#container-9 > ul').data('selected.tabs') );
                    return false;
                });
                $('#container-10 > ul').tabs({ selected: null, unselect: true });
                $('#container-11 > ul').tabs({ event: 'mouseover' });
            });
            // ]]>
        </script>
    </body>
</html>
